#{extends 'securesocial/SecureSocial/main.html'/}
#{set title: messages.get('securesocial.signUpTitle') /}

<div class="span12 columns">
    <div class="page-header">
        <h1>&{'securesocial.signUpTitle'}</h1>
    </div>

    #{if flash.error}
    <div class="alert-message block-message error">
        <div class="alert-actions">
            ${flash.error}
        </div>
    </div>
    #{/if}

    <div class="clearfix" >
        <p>&{'securesocial.signUpLabel'}</p>
        #{form @securesocial.UsernamePasswordController.createAccount(), autocomplete:'off'}
            <fieldset>
                <div class="clearfix #{ifError 'userName'} error #{/ifError}">
                    <label for="userName">&{'securesocial.userName'}</label>
                    <div class="input">
                        <input id="userName" class="large" name="userName" value="${flash.userName}"/>
                        #{ifError 'userName'}
                        <span class="help-inline">#{error 'userName'/}</span>
                        #{/ifError}
                    </div>
                </div>

                <div class="clearfix #{ifError 'displayName'} error #{/ifError}">
                    <label for="displayName">&{'securesocial.name'}</label>
                    <div class="input">
                        <input id="displayName" class="large" name="displayName" value="${flash.displayName}"/>
                        #{ifError 'displayName'}
                        <span class="help-inline">&{'securesocial.required'}</span>
                        #{/ifError}
                    </div>
                </div>

                <div class="clearfix #{ifError 'email'} error #{/ifError}">
                    <label for="email">&{'securesocial.email'}</label>
                    <div class="input">
                        <input id="email" class="large" name="email" value="${flash.email}"/>
                        <span class="help-inline">
                            #{ifError 'email'}
                            #{error 'email'/}
                            #{/ifError}
                            #{else}
                            &{'securesocial.emailHelp'}
                            #{/else}
                        </span>
                    </div>
                </div>

                <div class="clearfix #{ifError 'password'} error #{/ifError}">
                    <label for="password">&{'securesocial.password'}</label>
                    <div class="input">
                        <input id="password" class="large" name="password" type="password"/>
                        #{ifError 'password'}
                        <span class="help-inline">&{'securesocial.required'}</span>
                        #{/ifError}
                    </div>
                </div>

                 <div class="clearfix #{ifError 'password2'} error #{/ifError}">
                    <label for="password2">&{'securesocial.password2'}</label>
                    <div class="input">
                        <input id="password2" class="large" name="password2" type="password"/>
                        #{ifError 'password2'}
                        <span class="help-inline">#{error 'password2'/}</span>
                        #{/ifError}
                    </div>
                </div>

                <div class="actions">
                    <input type="submit" value="Create Account" class="btn primary">
                    <a href="@{securesocial.SecureSocial.login()}"><button class="btn">&{'securesocial.cancel'}</button></a>
                </div>
            </fieldset>
        #{/form}
    </div>
</div>